<script setup>
import { ref, reactive, onMounted } from "vue";
import {
  VcConfigProvider,
  VcViewer,
  VcLayerImagery,
  VcImageryProviderTianditu,
} from "vue-cesium";
import MyCesium from "@/utils/MyCesium/index.js";

let myCesium = null;

const token =
  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5Y2Q2ZTRlZS03NTQyLTQ3OWMtYjMwOC0yYzRhMDA5MjEwMGQiLCJpZCI6MTcwNzY0LCJpYXQiOjE2OTY4MzM4Mjl9.L0e-Xusfah_67xF3VFbNlwnn9zymJuzhr7wMHpmKF-Y";

const tdtKey = ref("c7830f0a6919e150c43c99b058a0ceac");
const vcConfig = reactive({
  cesiumPath: "/Cesium/Cesium.js",
  accessToken: token,
});
const viewerRef = ref(null);
const position = ref([118.77892966118867, 32.03690474813067, 1500]);

onMounted(() => {
  viewerRef.value?.creatingPromise.then((readyObj) => {
    // console.log('onM:', readyObj.Cesium) // Cesium namespace object
    // console.log('onM:', readyObj.viewer) // instanceof Cesium.Viewer
  });
});

function onViewerReady(readyObj) {
  const Cesium = readyObj.Cesium;
  const viewer = readyObj.viewer;
  const scene = viewer.scene;
  myCesium = new MyCesium(Cesium, viewer);
  myCesium.setView(position.value);
  myCesium.lockAngle();
  myCesium.setZoom(400, 20000);
}
</script>

<template>
  <div class="the-map" v-if="false">
    <div class="mask"></div>
    <vc-config-provider
      :cesium-path="vcConfig.cesiumPath"
      :access-token="vcConfig.accessToken"
    >
      <vc-viewer
        class="map-container"
        ref="viewerRef"
        @ready="onViewerReady"
        :info-box="false"
      >
        <!-- 注记层 -->
        <vc-layer-imagery :sort-order="20">
          <vc-imagery-provider-tianditu
            map-style="cva_c"
            :token="tdtKey"
          ></vc-imagery-provider-tianditu>
        </vc-layer-imagery>
        <!-- 影像层 -->
        <vc-layer-imagery :sort-order="10">
          <vc-imagery-provider-tianditu
            map-style="img_c"
            :token="tdtKey"
            ref="provider"
          ></vc-imagery-provider-tianditu>
        </vc-layer-imagery>
      </vc-viewer>
    </vc-config-provider>
  </div>
</template>

<style lang="scss" scoped>
.the-map {
  .mask {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: linear-gradient(
        270deg,
        rgba(3, 8, 21, 0.9) 0%,
        rgba(3, 8, 21, 0) 36.29%,
        rgba(3, 8, 21, 0) 62.66%,
        rgba(3, 8, 21, 0.9) 99.1%
      ),
      linear-gradient(
        180deg,
        rgba(3, 8, 21, 0.9) 0%,
        rgba(3, 8, 21, 0) 39.37%,
        rgba(3, 8, 21, 0) 78.85%,
        rgba(3, 8, 21, 0.9) 100%
      ),
      no-repeat;
    pointer-events: none;
    z-index: 1;
  }

  .map-container {
    width: 100%;
    height: 100%;
  }
}
</style>
